<jsp:directive.page contentType="text/html;charset=utf-8" />
<%@ include file="/taglibs.jsp" %>

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<%@ page import="com.zui.webapp.support.ConfigurationHelper,com.ckeditor.CKEditorConfig" %>

<head>
<title>Fill detailed information</title>
<link rel="stylesheet" type="text/css" 	href="${ctx}/scripts/jquery-chosen/chosen.css" />
<%@ include file="/WEB-INF/jsps/includes/jqueryFileUpload.jsp" %>
<script type="text/javascript" src="${ctx}/scripts/jquery-chosen/chosen.jquery.js" ></script>

<script>
$(function() {
	$(".chzn-select").chosen();
});
</script>

</head>
<body>



<div class="row">
	<div class="span1"></div>
	<div class="span10">
		<div class="row">
			<div class="span5">
			<a href="${ctx}/trade!showSelectCategoryPage.action" 
				class="btn btn-large btn-block">Step 1: Select a Category - ${category.name} | ${category.nameEn}</a></div>
			<div class="span5">
			<a href="javascript:void(0);" class="btn btn-large btn-block btn-primary disabled">Step 2: Fill the information</a></div>
		</div>
		&nbsp;
		<div class="alert alert-info">
		<s:text name="message.info"/>亲爱的 <sec:authentication property='name'/>，你的信用值是 10，今天你还可以发布 10 条信息！
		</div>
		
	<form id="fileupload" action="${ctx}/trade!postAd.action" validate="true" class="form-horizontal" autocomplete="off" method="POST">
		<input type="hidden" name="trade.product.primaryCategory.id" value="${category.id}"/>
		<fieldset >
			<div class="control-group">
				<label class="control-label" for="supplyOrDemand">
					<s:text name="module.trade.tradeType"/></label>
				<div class="controls">
					<label class="radio inline">
					  <input type="radio" name="trade.tradeType.id" id="tradeType" value="SALES" checked="checked">
					  <s:text name="module.trade.sales"/>
					</label>					
					<label class="radio inline">
					  <input type="radio" name="trade.tradeType.id" id="tradeType" value="PURCHASE">
					  <s:text name="module.trade.purchase"/>
					</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="title">
					<s:text name="icon.asterisk"/><s:text name="module.common.title"/></label>
				<div class="controls">
					<input type="text" id="title" name="trade.title" minlength="6" maxlength="50" class="string required input-xlarge" 
						rel="popover" data-content="And here's some amazing content. It's very engaging"/>
					<span class="help-block">6 - 50 Characters, Telephone No. is not allowed.</span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="price">
					<s:text name="icon.asterisk"/><s:text name="module.trade.price"/></label>
				<div class="controls">
					<s:textfield id="price" name="trade.price" maxlength="5" cssClass="digits required input-mini" />
					<s:property value="trade.currencyUom.name"/>
				</div>
			</div>
			<div class="control-group">
				<s:label cssClass="control-label" key="module.product.feature"/>
				<div class="controls">
					<s:iterator value="category.primaryParentCategory.featureCategoryAppl" var="pfca" >
						<s:property value="featureCategory.name"/>
							<s:select name="trade.featureIds"
								listKey="id" listValue="name"
								cssClass="span1" list="featureCategory.features" />&nbsp;					
					</s:iterator>
					<s:iterator value="category.featureCategoryAppl" var="fca" >
						<s:property value="featureCategory.name"/>
							<s:select name="trade.featureIds"
								listKey="id" listValue="name"
								cssClass="span1" list="featureCategory.features" />&nbsp;					
					</s:iterator>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="geoCity">
					<s:text name="module.geo.area"/></label>
				<div class="controls">
				<s:select id="geoCity" name="trade.geoCity.id"  cssClass="chzn-select span2"
					list="areaList" listKey="id" listValue="name" value="trade.geoCity.id"></s:select>
				</div>
			</div>
			<%-- Rich Text --%>
			<div class="control-group">
				<label class="control-label" for="longDescription">
					<s:text name="icon.asterisk"/><s:text name="module.common.description"/></label>
				<div class="controls">
					<textarea id="longDescription" name="trade.product.longDescription" rows="5" cols="65" class="required richText">
					</textarea>
					<span class="help-block">Must be at least six characters long</span>
				</div>
			</div>
			
			 <%-- Image upload --%>
			 <div class="control-group">
				<label class="control-label" for="uploadedFile">
					<s:text name="module.common.image"/></label>
				<div class="controls fileupload-buttonbar">
					<div class="clearfix">
						<span class="btn btn-success fileinput-button">
		                    <i class="icon-plus icon-white"></i>
		                    <span>Add files...</span>
		                    <img src="about:blank" id="fileChecker" height="180" class="hidden"/>
		                    <input type="file" id="uploadedFile" name="uploadedFile" multiple="multiple" accept="image/png,image/gif,image/jpeg,image/jpg"></input>
		                </span>
			            <!-- The global progress information -->
			            <div class="span5 fileupload-progress fade pull-left">
			                <!-- The global progress bar -->
			                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
			                    <div class="bar" style="width:0%;"></div>
			                </div>
			                <!-- The extended global progress information -->
			                <div class="progress-extended" style="margin-top:-18px"></div>
			            </div>
		            </div>
		            <span class="help-block">At least 1 image, at most 5 images is allowed! The first image will be the primary one.</span>
			        <!-- The loading indicator is shown during file processing -->
			        <div class="fileupload-loading"></div>
			        <!-- The table listing the files available for upload/download -->
			        <table role="presentation" class="table table-striped" style="margin-bottom:0">
			        	<tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
				</div>
			</div>
			
			
			<%-- Phone --%>
			<div class="control-group">
				<label class="control-label" for="phone">
					<s:text name="icon.asterisk"/><s:text name="module.trade.phone"/></label>
				<div class="controls">
					<s:textfield id="phone" name="trade.phone" maxlength="20" cssClass="digits required" />
				</div>
			</div>
			<%-- contact --%>
			<div class="control-group">
				<label class="control-label" for="contact">
					<s:text name="icon.asterisk"/><s:text name="module.trade.contact"/></label>
				<div class="controls">
					<s:textfield id="contact" name="trade.contact" maxlength="20" cssClass="required" />
					&nbsp;
				    <label class="checkbox inline">
				      	<input type="checkbox" id="commercialFlag" name="trade.commercialFlag" value="Y" /> 我是商家
				    </label>
				</div>
			</div>						
			<%-- IM --%>
			<div class="control-group">
				<label class="control-label" for="im">
					<s:text name="module.trade.im"/></label>
				<div class="controls">
					<s:textfield id="im" name="trade.im" maxlength="20" cssClass="" />
				</div>
			</div>	
		</fieldset>
		<div class="control-group">
			<div class="controls">
				<button id="save" type="button" class="btn btn-primary pull-left"  data-loading-text="saving..."><s:text name="button.save"/></button>
			</div>
		</div>
	</form>
	</div>
	<div class="span1"></div>
</div>

<%
	CKEditorConfig settings = new CKEditorConfig();
	settings.addConfigValue("toolbar","[{name: 'document', items: ['Source', '-', 'Bold', 'Italic']}," +
	                                    "{name: 'styles', items: ['Styles','Format','Color']}," +
	                                	"{ name: 'colors', items : [ 'TextColor','BGColor' ] }]");
%>

<ckeditor:replace replace="longDescription" basePath="${ctx}/ckeditor/"  config="<%=settings%>"/>

<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">
        <a class="btn modal-download" target="_blank">
            <i class="icon-download"></i>
            <span>Download</span>
        </a>
    </div>
</div>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary btn-small" title="Start">
					<i class="icon-upload icon-white"></i>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning btn-small" title="Cancel">
				<i class="icon-ban-circle icon-white"></i>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}" target="_blank"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
				<input type="hidden" name="trade.imageIds" value="{%=file.imageId%}" />
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}" >{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger btn-small" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash"></i>
            </button>
        </td>
    </tr>
{% } %}
</script>
<script>
	$(function() {
		$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
		$("#fileupload").validate({
			ignore: ".ignore",
		     errorPlacement: function(error, element)
		      {
		        $(element).parent('div').append(error[0]);
		      },
		  rules:{
		        'trade.product.longDescription':{required: true}
		  },
		});
		
		$("#save").click(function(e){
			e.preventDefault();
			for (var i in CKEDITOR.instances) {
				CKEDITOR.instances[i].updateElement();
			}
			if($("#fileupload").valid()) {
				$('#save').button('loading');
				fileupload.submit();
				
			}
		});
		   'use strict';
		   
		    // Initialize the jQuery File Upload widget:
		    $('#fileupload').fileupload({
		        // Uncomment the following to send cross-domain cookies:
		        //xhrFields: {withCredentials: true},
		        url: 'addTradeProductImage.action',
		        maxFileSize: 5242880,
		        maxNumberOfFiles: 5,
		        autoUpload: true,
		        acceptFileTypes: /(\.|\/)(gif|p?jpe?g|png|x-png)$/i,
		        process: [
		            {
		                action: 'load',
		                fileTypes: /^image\/(gif|jpeg|png)$/,
		                maxFileSize: 10485760 // 10MB
		            },
		            {
		                action: 'resize',
		                maxWidth: 1920,
		                maxHeight: 1440
		            },
		            {
		                action: 'save'
		            }
		        ],
		        // Unwrapping HTML-encoded JSON required for IE's iframe transport.
		        dataType: 'iframejson',
		        converters: {
		          'html iframejson': function(htmlEncodedJson) {
		            return $.parseJSON($('<div/>').html(htmlEncodedJson).text());
		          },
		          'iframe iframejson': function (iframe) {
		            return $.parseJSON(iframe.find('body').text());
		          }
		        }
		    });
		    //Fix firefox input disable attr issue
		    $("input[type=file]").removeAttr('disabled');

		    // Enable iframe cross-domain access via redirect option:
		    $('#fileupload').fileupload(
		        'option',
		        'redirect',
		        window.location.href.replace(
		            /\/[^\/]*$/,
		            '/cors/result.html?%s'
		        )
		    );
		    $('#fileupload').fileupload(
			        'option',
			        'redirect',
			        window.location.href.replace(
			            /\/[^\/]*$/,
			            '/cors/result.html?%s'
			        )
			    );		
	});
</script>

</body>
